import React from 'react';
import {
    Animated, findNodeHandle,
    FlatList,
    Image,
    RefreshControl,
    ScrollView,
    StatusBar,
    Text,
    TouchableOpacity,
    View,
    ViewPagerAndroid,
} from 'react-native';
import Styles from './Styles';
import JsonData from './Jsons';
import TitleBar from '../../components/TitleBar_Main';
import Banner from '../../components/Banner_Main';
import Item_Circle from '../../components/Item_Circle';
import Item_Goods from '../../components/Item_Goods';
import TabScreen from '../../components/TabScreen';
import LinearGradient from 'react-native-linear-gradient';
import RefreshList from '../../documents/code';



let scrollSize = 6;
let url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1555765409920&di=b785e5953b8a6de971f0c5430bb6226b&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201410%2F15%2F20141015142052_aJUBr.png';
let url1 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-001.jpg';
let url2 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-002.jpg';
let url3 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-003.jpg';
let url4 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-004.jpg';
let url5 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-005.jpg';
let url6 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-006.jpg';
let url7 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-007.jpg';
let url8 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-008.jpg';
let url9 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-009.jpg';
let url10 = 'https://img.ivsky.com/img/tupian/t/201612/05/yinyue_aihaozhe_chui_xiaohao-010.jpg';



export default class Page1 extends BaseComponent {

    static navigationOptions = {
        tabBarLabel: '首页',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={Styles.tabBarIcon} source={require('../../images/home_fill.png')}/>
                );
            }
            return (
                <Image style={Styles.tabBarIcon} source={require('../../images/home.png')}/>
            );
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
            gridData: [
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063217&di=1c4962aad6a64fd2f4a381de8d05d595&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Ff2%2F8%2Fd%2F96.jpg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063216&di=0f4f9bbaaee6bafe24fab3e5f472c481&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201512%2F12%2F20151212120309_BduTC.jpeg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063214&di=f73de557becc9667bb105fdfecd39426&imgtype=0&src=http%3A%2F%2Fimgq.duitang.com%2Fuploads%2Fitem%2F201503%2F22%2F20150322171820_UtwMk.thumb.700_0.jpeg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063210&di=b936ead7972601ea0c12e8648a8f1df0&imgtype=0&src=http%3A%2F%2Fpic31.photophoto.cn%2F20140403%2F0020033029624335_b.jpg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850155795&di=72f9878782ad4b80ea320111effe0b71&imgtype=0&src=http%3A%2F%2Fpic27.photophoto.cn%2F20130420%2F0005018421916914_b.jpg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850155794&di=4efaecca3f367346ff49c42f8f89d9f2&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201206%2F26%2F20120626190359_MjB3s.thumb.700_0.jpeg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063217&di=1c4962aad6a64fd2f4a381de8d05d595&imgtype=0&src=http%3A%2F%2Fimg15.3lian.com%2F2015%2Ff2%2F8%2Fd%2F96.jpg'},
                {uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537850063216&di=0f4f9bbaaee6bafe24fab3e5f472c481&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201512%2F12%2F20151212120309_BduTC.jpeg'},
            ],
            circleData: [
                [{url: url, name: '第一'}, {url: url, name: '第二'}],
                [{url: url, name: '第三'}, {url: url, name: '第四'}],
                [{url: url, name: '第五'}, {url: url, name: '第六'}],
                [{url: url, name: '第七'}, {url: url, name: '第八'}],
                [{url: url, name: '第九'}, {url: url, name: '第十'}],
                [{url: url, name: '第十一'}, {url: url, name: '第十二'}],
                [{url: url, name: '第十三'}, {url: url, name: '第十四'}],
                [{url: url, name: '第十五'}, {url: url, name: '第十六'}],
                [{url: url, name: '第十七'}, {url: url, name: '第十八'}],
                [{url: url, name: '第十九'},]
            ],
            goodsData:[
                {title:'标题一',subtitle:'周末五折起',img1:url1,img2:url2,isShow:true},
                {title:'标题二',subtitle:'限时抢购',img1:url3,img2:url4,isShow:true},
                {title:'标题三',subtitle:'大降价',img1:url5,img2:url6,isShow:true},
                {title:'标题四',subtitle:'品质好物',img1:url7,img2:url8,isShow:true},
                {title:'标题五',subtitle:'新东西',img1:url9,img2:url10,isShow:true},
            ],
            initValue: new Animated.Value(0),
            scrollHeight:0,
        };
    }

    _onRefresh = () => {
        this.setState({
            refreshing: true
        });

        setTimeout(() => {
                this.setState({
                    refreshing: false
                });
            }, 3000
        );
    };

    // 左右边按钮
    _onClick = (param) => {
        alert('事件：' + param);
    };

    // 横向列表点击
    _initCircleItem(itemData) {
        return (
            <Item_Circle data={itemData.item} onClick={(msg) => {
                alert(msg)
            }}/>
        )
    }

    // 跳转
    turn(navigate1) {
        return (
            <View style={{flex: 1, flexDirection: 'column', width: Config.deviceWidth}}>
                <TouchableOpacity
                    style={{
                        height: 60,
                        backgroundColor: 'orange',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}
                    onPress={() => navigate1('Detail1', {title: 'Detail1', des: '我是返回点击我'})}
                >
                    <Text>首页，{JsonData.msg}</Text>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        const {navigate} = this.props.navigation;
        let urlString = "";
        return (

            <View style={Styles.container}>

                <View>
                    <StatusBar
                        translucent={true}
                        backgroundColor={"transparent"}/>

                    <LinearGradient
                        start={{x: 0, y: 0}}
                        end={{x: 1, y: 0}}
                        colors={['#FF8F03', '#FF5301']}
                        style={{paddingTop:Config.statusBarHeight}}
                    >
                        <TitleBar
                            bgColor={{backgroundColor: 'transparent',}}
                            textContent={'传来的Text'}
                            hidden={'none'}
                            onLeftPress={this._onClick.bind(this, "左边的按钮")}
                            onRightPress={this._onClick.bind(this, "右边的按钮")}/>
                    </LinearGradient>

                </View>

                <ScrollView
                    ref={"root"}
                    onMomentumScrollEnd = {(event)=>{
                        let offsetY = event.nativeEvent.contentOffset.y; //滑动距离
                        let contentSizeHeight = event.nativeEvent.contentSize.height; //scrollView contentSize高度
                        let originScrollHeight = event.nativeEvent.layoutMeasurement.height; //scrollView高度
                        if (offsetY + originScrollHeight >= contentSizeHeight){
                            //ShowToast('滑到底部了')
                            this.childList._onEndReached()
                        }
                    }}
                    stickyHeaderIndices={[1]} /* 数值决定由第几个子控件吸顶 */
                    showsVerticalScrollIndicator={false}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                            progressViewOffset={-30}
                        />
                    }
                    onScrollBeginDrag={()=>{
                        Log('root');
                    }}
                >
                    <View
                        onLayout={({nativeEvent:e})=> {
                            this.setState({
                                scrollHeight:e.layout.height,
                            });
                        }}
                    >
                        <LinearGradient
                            ref={"lg"}
                            start={{x: 0, y: 0}}
                            end={{x: 1, y: 0}}
                            colors={['#FF8F03', '#FF5301']}
                            style={{flex: 1, flexDirection: 'row', padding: 6}}
                        >
                            <View>
                                <Text style={{color: 'white', fontSize: 12,}}>热搜: </Text>
                            </View>

                        </LinearGradient>

                        <Banner containerStyle={{width:Config.deviceWidth,height:150}}/>

                        <FlatList
                            renderItem={this._initCircleItem.bind(this)}
                            data={this.state.circleData}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            onScroll={(event)=>{
                                let offsetX = event.nativeEvent.contentOffset.x; //滑动距离
                                //let offsetY = e.nativeEvent.contentOffset.y; //滑动距离
                                //let contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
                                //let originScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度
                                Animated.timing(                     // 动画可选类型: spring, decay, timing
                                    this.state.initValue,            // 动画的初始值
                                    {
                                        toValue: offsetX / scrollSize,      //
                                        duration: 0,                    // 动画的持续时间（毫秒）。默认值为 500.
                                    }
                                ).start();
                            }}
                        />

                        <View style={{flex:1,flexDirection:'row',justifyContent: 'center',alignItems: 'center'}}>
                            <View style={{width: Config.deviceWidth / scrollSize + 20, height: 5, backgroundColor: '#c8c8c8'}}>
                                <Animated.View
                                    style={{width: 20, height: 5, backgroundColor: 'red', marginLeft: this.state.initValue}}/>
                            </View>
                        </View>

                        <Item_Goods data={this.state.goodsData}/>

                    </View>

                    <TabScreen
                        fatherRef={this.refs.root}
                        height={this.state.scrollHeight}
                        data={JsonData.tabList}
                    />

                    <RefreshList
                        url={urlString}
                        ref={(view)=>{
                            this.childList=view
                        }}
                    />


                    {/*<View style={{marginBottom:40}}>
                        <List />
                    </View>

                    <List_Grid
                        cols={2}
                        navigation={this.props.navigation}
                        data={this.state.gridData}/>*/}

                </ScrollView>

            </View>
        );
    }


}
